<template>
    <div class="container">
        <div class="loginBox">
            <div class="logo">
                <img src="../assets/images/timg.gif">
                </div>
           
<div class="loginFrom">
    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px" class="login_form">
        <el-form-item prop="username">
            <!-- v-model="loginForm.username"  -->
          <el-input size="large" placeholder="请输入用户名称" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <!-- v-model="loginForm.password" -->
          <el-input size="large"  placeholder="请输入登录密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="verifyCode"> -->
          <!-- <div class="verifyCode_box">
            <el-input v-model="loginForm.verifyCode" placeholder="请输入手机验证码" prefix-icon="el-icon-mobile" class="verifyCode"></el-input>
            <img src="../assets/images/msFXK1.gif" alt="" class="verifyCode_img">
          </div>
        </el-form-item> -->
        <el-form-item class="login_btn">
          <el-button type="primary" @click="onSubmit" >立即创建</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
</div>
</div>
 <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
</div>

</template>

<script>
import { ref, reactive } from 'vue';
import Vcode from "vue3-puzzle-vcode";


    export default {
        
    //    name:'Login',
    //    data(){
    //     return {
    //     loginForm: {
    //       username: '',
    //       password: '',
    //       verifyCode: '',
    //     },
    //       loginRules: {
    //       username: [
    //         { required: true, message: '请输入用户名称', trigger: 'blur' },
    //         { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
    //       ],
    //       password: [
    //         { required: true, message: '请输入登录密码', trigger: 'blur' },
    //         { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
    //       ],
    //       verifyCode: [
    //         { required: true, message: '请输入验证码', trigger: 'blur' }
    //       ]
    //     }
    //   }
    // }
    
    setup(){
        //是否显示
        const isShow = ref(false);
        const user=reactive({
            username:"",
            password:"",
        });
        //是否关闭
        const onClose = () => {
    isShow.value = false;
  };


  const onSuccess = () => {
    onClose(); // 验证成功，需要手动关闭模态框
  };
    
  const onSubmit=()=> {
  isShow.value=true;
  }
        return {
            user,
            onSubmit,
            onSuccess,
            onClose,
            isShow
        };
    },
  components: {
    Vcode,
  },
   
}
</script>

<style lang="less" scoped>
.container{
    height: 100%;
    // background-color: aquamarine;
    background-color: rgb(245, 255, 211);
}
.loginBox{
    width: 450px;
    height: 380px;
    background-color: #FFFFFF;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
.logo{
     width: 130px;
      height: 130px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      padding:  10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin: -65px auto;
      background-color: #FFFFFF;
  img{
    width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #EEEEEE;
  }
 }
 .login_form{
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 35px 20px;
      box-sizing: border-box;

      .login_btn{
        display: flex;
        justify-content: flex-end;
      }

    //   .verifyCode_box{
    //     display: flex;
    //     .verifyCode{
    //       width: 70%;
    //       justify-content: left;
    //     }

        // .verifyCode_img{
        //   width: 30%;
        //   height: 45px;
        //   justify-content: flex-end;
        // }
    //   }
    }
}

</style>